<template>
	<view :style="viewColor">
		<view class="bus-index">
			
			<view class="navbar" :style="{ height: navH + 'rpx', opacity: opacity }">
				<view class="navbar-title" :style="'height:' + navH + 'rpx;'">
					<view class="display-flex display-flex-align-center" :style="'margin-top:'+(sysHeight+20)+ 'rpx;'">定制旅行</view>
				</view>
			</view>
			<!-- #ifndef MP-ALIPAY || MP-BAIDU -->
			<view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
				<view class="head-menu-new" :style="{color: (opacity > 0.7 ?'#000' :'#fff'),background:  (opacity > 0.7 ?'#fff' :'rgba(0, 0, 0, .25)'),border: (opacity>0.7?'none':'')}">
					<view class='iconfont icon-ic_left' @click="returns"></view>
				</view>
			</view>
			<!-- #endif -->
			<view class="ova w100">
				<view class="w100">
					<view class="">
						
					</view>
					<view class="bus-index-bg">
						<image src="https://qiniu.gzyxly.cn/def/71fc1202411151331541059.jpg" class="w100 h100">
					</view>
					
					<view class="hd is-advisor-ab">
	
						<view @click="changeTab(item.index)" v-for="(item, index) in tabList" :key="index" :class="item.index==tabindex?'on':''" class="item  display-flex-column">
							<view class="title">
								{{item.title}}
							</view>
							<view class="subtitle">
								{{item.subTitle}}
							</view>
							<view class="line"></view>
							<view v-if="index == 1" class="tab-bg1"></view>
							<view v-if="index == 0" class="tab-bg2"></view>
						</view>
					</view>
					<view class="bg-white mr-15 ml-15" style="">
						<view class="" style="padding: 15px  18px 20px 18px;">
							<view class=" display-flex display-flex-align-center  mb-15">
								<view class="text-16 text-black ft-w600 mr-15">目的地</view>
								<!-- <view  class="flex-1  text-black text-14">
								  <input  v-model="form.destination"   placeholder="请输入您想去哪儿"/>
								</view> -->
								<view @click="goselAdd(2)" style="flex: 1;" >
									<view class="display-flex display-flex-align-center address-input" style="height:44px;">
										<view v-if="form.destination" class="text-ellipsis color-999" style="font-size:26upx;color: #121212;width: 200px;">{{form.destination}}</view>
										<view v-else class=" color-999" style="font-size:26upx;">请输入您想去哪儿</view>
									</view>
								</view>
							</view>
							<view class="separate-line"></view>
							<view @click="openDate" class=" display-flex display-flex-align-center mt-15 mb-15">
								<view class="text-16  text-black ft-w600 mr-15">出发日期</view>
								<view v-if="form.go_time"  class="flex-1 text-black text-14">
							       <text >{{form.go_time}}</text>
								</view>
								<view v-else class="flex-1   text-14 " style="color: #848484;">
									选择出发日期
								</view>
							</view>
							<view class="separate-line"></view>
							<view class=" display-flex display-flex-align-center mt-15 mb-15">
								<view class="text-16 text-black ft-w600 mr-15">出行人数</view>	
								<view  class="flex-1  text-black text-14">
								  <input  v-model="form.people_sum" type="number"  placeholder="请输入出行人数"/>
								</view>
							</view>
							<view class="separate-line"></view>
							<view class=" display-flex display-flex-align-center mt-15 mb-15">
								<view class="text-16 text-black ft-w600 mr-15">出行天数</view>
								<view  class="flex-1  text-black text-14">
								  <input  v-model="form.days" type="number"  placeholder="请输入出行天数"/>
								</view>
							</view>
							<view class="separate-line"></view>
							<view class=" display-flex display-flex-align-center mt-15 mb-15">
								<view class="text-16 text-black ft-w600 mr-15">联系方式</view>
								<view  class="flex-1  text-black text-14">
								  <input  v-model="form.phone" type="number" maxlength="11" placeholder="请输入联系方式"/>
								</view>
							</view>
							<view class="mt-15 mb-10">
								<view class="button-search" @click="submitTrip">
									<text class="text">提交需求</text>
								</view>
							</view>
						</view>
					</view>
					<view class="pd-12 br-10 bg-color-eee mt-15 mr-15 ml-15 mb-10">
						<view class="text-16 text-black ft-w700 mb-15 text-align-center">
							定制流程
						</view>
						<view class="display-flex display-flex-align-center display-flex-justify-center mb-15">
							<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
								<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
									<view class="iconfont icon-icon-pencil">	
									</view>
								</view>
								<view class="text-12">
									填写需求
								</view>
							</view>
							<view class="dz-dash" ></view>
							<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
								<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
									<view class="iconfont icon-fenzu">	
									</view>
								</view>
								<view class="text-12">
									设计行程
								</view>
							</view>
							<view class="dz-dash" ></view>
							<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
								<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
									<view class="iconfont icon-fukuan">	
									</view>
								</view>
								<view class="text-12">
									合作付款
								</view>
							</view>
							<view class="dz-dash"></view>
							<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
								<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
									<view class="iconfont icon-7">	
									</view>
								</view>
								<view class="text-12">
									开心出行
								</view>
							</view>
						
						</view>
						<view @click="openDzDetail" style="color: var(--view-theme);" class=" text-12 display-flex display-flex-align-center display-flex-justify-center">
							<text>了解私人定制服务</text>
							<text class="iconfont icon-ic_right"></text>
						</view>
					</view>
				
					<view class="tab-bar">
						<view @click="gotoOrderList"  class="tab-item">
							<view class="iconfont icon-a-ic_ic_orderforgoods1 text-20">	</view>
							<view class="mt-5 text-14">
								我的订单
							</view>
						</view>
						<view class="tab-item" > 
							<kefu></kefu>
							<view class="mt-5 text-14">
								联系客服
							</view>
						</view>
					</view>
				</view>
			</view>
		   <view class="mb-100">
		   	<recommend v-if="recommend_switch == 1" :hostProduct='hostProduct' :isLogin="isLogin"></recommend>
		   </view>
	
		</view>
	    <uni-popup ref="bindmobile" type="bottom">
	    	 <view class="" style="height: 500px;">
	    	 	<calendar :salesDates="dateList" :start-date="selectDay" @callback="dateChange" @colseCal="colseCal">
	    	 	</calendar>
	    	 </view>
	    </uni-popup>
		<uni-popup ref="dzdetail" type="bottom">
			<view class="bg-white br-8" style="height: 500px;">
				<view class="popup-header">
					<view class="popup-title">
						定制游服务流程
					</view>
					<view @click="colseDzDetail" class="popup-close1 iconfont icon-ic_close text-18">	</view>
				</view>
				<view class="return-bock pd-12">
					<view>
						<view class="">
						  <text class="text-black ft-w700">1.提交出行需求</text>
						</view>
						<view class="mt-5">
							<text class="text-14">您可根据页面提示，填写出行需求和留下联系方式</text>
						</view>
					</view>
					<view>
						<view class="mt-15">
						  <text class="text-black ft-w700">2.匹配定制师</text>
						</view>
						<view class="mt-5">
							<text class="text-14">系统将根据您的出行需求为您匹配定制师，定制师在接单后会尽快联系您,请您耐心等待</text>
						</view>
					</view>
					<view>
						<view class="mt-15">
						  <text class="text-black ft-w700">3.设计出行方案</text>
						</view>
						<view class="mt-5">
							<text class="text-14">定制师将根据您的出行需求，初步拟定相应的出行方案</text>
						</view>
					</view>
					<view>
						<view class="mt-15">
						  <text class="text-black ft-w700">4.确定出行方案</text>
						</view>
						<view class="mt-5">
							<text class="text-14">定制师会与您沟通，敲定出行方案细节，双方确定最终方案</text>
						</view>
					</view>
					<view>
						<view class="mt-15">
						  <text class="text-black ft-w700">5.报价与支付</text>
						</view>
						<view class="mt-5">
							<text class="text-14">定制师根据最终确定的出行方案进行报价，您需在订单交易时间内完成订单支付</text>
						</view>
					</view>
					<view>
						<view class="mt-15">
						  <text class="text-black ft-w700">6.平台服务</text>
						</view>
						<view class="mt-5">
							<text class="text-14">平台将提供7*24小时服务至行程结束</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import Cache from '@/utils/cache';
import { getCityInfo} from '@/api/api.js';
import dayjs from '@/utils/day.js'
import util from '@/utils/util.js'
import { getUserInfo } from '@/api/user.js';
import { saveDingzhi } from "@/api/api.js"
import calendar from '@/components/calendar/index'
import { configMap, getCustomer } from "@/utils";
import recommend from '@/components/recommend';
import { mapGetters } from "vuex";
import { getProductHot } from '@/api/store.js';

let app = getApp();
var sysHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
	data() {
		return {
			sysHeight: sysHeight, //系统导航条高度
			start_loc: '',
			end_loc: '',
			changeFlag: false,
			isInitLoc: false,
			isLocCancel: false,
			selectDay: '',

			dateList: [],
			navH: '',
			opacity: 0,
			homeTop: 59,
			historyList:[],
			tabindex: 1,
			tabList: [
				{
					title: '个人定制',
					subTitle: '亲子·蜜月·好友',
					index: 1
				},
				{
					title: '团建/公司定制',
					subTitle: '大团·素拓·会务',
					index: 2
				}
			],
			form: {
				type:'',
				destination: '',
				go_time: '',
				people_sum: '',
				name: '',
				phone: '',
				days: '',
			},
			userInfo: '',
			hostProduct: []
		};
	},
	components:{ calendar, recommend },
	computed: configMap({recommend_switch:0},mapGetters(['isLogin','viewColor'])),
	
	onLoad(options) {
		var that = this;
		// that.navH = app.globalData.navHeight+10;
		uni.getSystemInfo({
			success: function(res) {
				console.log('res',res)
				that.navH = res.statusBarHeight * (750 / res.windowWidth) + 100;
				// that.navH = app.globalData.navHeight+10;
				console.log('that.navH',that.navH)
			}
		});
		// #ifdef APP-PLUS
		that.homeTop = (that.sysHeight + 8)*2;
		// #endif
		// #ifdef H5
		that.homeTop = 10;
		// #endif
		const tow = dayjs().add(1, 'day');
		this.selectDay = tow.format('YYYY-MM-DD')
		this.selectDayMd =  tow.format('MM月DD日')
		this.selectDayWeek =  util.getWeek(tow.day())
		this.form.go_time = this.selectDay;
		console.log(this.selectDay,this.selectDayMd,this.selectDayWeek)
	
		
		if (this.isLogin) {
			this.getUserInfo();
			this.get_host_product();
		} 
		
	},
	
	onShow() {
		var that = this;
	
		this.form.destination = uni.getStorageSync("end_dingzhi")?uni.getStorageSync("end_dingzhi"):"";
		
	},
	onUnload() {

		
	},
	onReady() {
		this.$nextTick(function() {
			// #ifdef MP-WEIXIN
			const menuButton = uni.getMenuButtonBoundingClientRect();
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#home')
				.boundingClientRect(data => {
					this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
				})
				.exec();
			// #endif
		});
	},
	onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
		var that = this,
		scrollY = e.scrollTop;
		var opacity = scrollY / 200;
		opacity = opacity > 1 ? 1 : opacity;
		that.$set(that, 'opacity', opacity);
	},
	methods: {
		/**
		 * 获取用户详情
		 */
		getUserInfo: function() {
			let that = this;
			getUserInfo().then(res => {
				that.$set(that, 'userInfo', res.data);
				if(res.data.phone){
					this.form.phone = res.data.phone;
				}
			});
		},
		changeTab(index){
			this.tabindex = index;
		},
		goselAdd(type){
			uni.navigateTo({
				url: '/pages/bus/search_address/index?op=dingzhi&&type='+type
			})
			
		},
		submitTrip(){
			
			this.form.type = this.tabindex
			
			// if(!this.form.origin){
			// 	return this.$util.Tips({
			// 		title: '请选择出发地'
			// 	}); 
			// }
			if(!this.form.destination){
				return this.$util.Tips({
					title: '请选择目的地'
				}); 
			}
			if(!this.form.go_time){
				return this.$util.Tips({
					title: '请选择去程时间'
				}); 
			}
			// if(!this.form.back_time&&this.current==1){
			// 	return this.$util.Tips({
			// 		title: '请选择返程时间'
			// 	}); 
			// }
			// if(!this.form.car_type){
			// 	return this.$util.Tips({
			// 		title: '请选择车辆类型'
			// 	}); 
			// }
			if(!this.form.people_sum){
				return this.$util.Tips({
					title: '请输入出行人数'
				}); 
			}
			if(!this.isValidPositiveInteger(this.form.people_sum)){
				return this.$util.Tips({
					title: '请输入正确出行人数'
				}); 
			}
				
			// if(!this.form.name){
			// 	return that.$util.Tips({
			// 		title: '请输入联系人姓名'
			// 	}); 
			// }
			if(!this.form.phone){
				return this.$util.Tips({
					title: '请输入联系人手机号'
				}); 
			}
			const regex = /^1[3456789]\d{9}$/;//使用此正则即可
			if (!regex.test(this.form.phone)){
				return this.$util.Tips({
					title: '请输入联系人正确手机号'
				}); 
			}
			
			if(!this.form.days){
				return this.$util.Tips({
					title: '请选择出行天数'
				}); 
			}
			if(!this.isValidPositiveInteger(this.form.days)){
				return this.$util.Tips({
					title: '请输入正确出行天数'
				}); 
			}
				
			
			uni.showLoading({ title: '请稍后' });
			saveDingzhi(this.form).then(res => {
				this.$util.Tips({
					title: '提交成功'
				}); 
				uni.hideLoading()
				uni.navigateTo({
					url:"/pages/bus/dingzhi/order_list",
				})
			}).catch(err => {
				console.log('err',err)
				uni.hideLoading()
				return this.$util.Tips({
					title: err
				}); 
			})
		},
		
		isValidPositiveInteger(str) {  
		    const regex = /^\d+$/;  
		    return regex.test(str);  
		} ,
		goCustomer: function() {
			let that = this;
			if (that.isLogin === false) {
				toLogin()
			} else {
				let url = `/pages/chat/customer_list/chat`;
				console.log('app.globalData.sys_service_data',app.globalData.sys_service_data)
				getCustomer(app.globalData.sys_service_data, url);
			}
		},
		openDzDetail(){
			this.$refs.dzdetail.open()
		},
		colseDzDetail(){
			this.$refs.dzdetail.close()
		},
		openDate(){
			console.log('this.$refs.bindmobile',this.$refs)
			this.$refs.bindmobile.open()
		},
		colseCal(){
			this.$refs.bindmobile.close()
		},
		dateChange:function(date){
			var that = this;
			// this.selectDay = date.startStr.dateStr;	
			console.log('this.date',date)
			
			this.selectDay =  date.startStr.dateStr
			// this.selectDayMd =  dayjs(this.selectDay).format('MM月DD日')
			// this.selectDayWeek =  util.getWeek(dayjs(this.selectDay).day())
			
		    this.form.go_time = date.startStr.dateStr;
			this.$refs.bindmobile.close()
		},
		gotoOrderList(){
			if(!this.isLogin){
				toLogin()
			} else {
				uni.navigateTo({
					url: "/pages/bus/dingzhi/order_list"
				})
			}
			
		},
	   // 后退
		returns: function() {
			// uni.navigateBack()
			uni.switchTab({
				url:'/pages/index/index'
			})
		},
		get_host_product: function () {
			let that = this;
			let data = { offset: 1, limit: 10 }
			getProductHot().then(function (res) {
				that.$set(that,'hostProduct',res.data.list);
			});
		},
		
	
	}
}
</script>

<style lang="scss">
	.bus-index{
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-direction: column;
		flex: 1;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	.navbar {
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
	}
	.head-menu-new {
		display: flex;
		align-items: center;
		height: 60rpx;
		width: 60rpx;
		// background: rgba(0, 0, 0, .25);
		border: 0.5rpx solid #cecece;
		border-radius: 50%;
		.iconfont {
			flex: 1;
			text-align: center;
			// color: #fff;
			font-size: 18px;
			box-sizing: border-box;
			&.icon-ic_leftarrow {
				border-right: 1px solid #fff;
			}
		}
	}
	.navbar-title{
		display: flex;
		// align-items: center;
		color: #000;
		font-size: 16px;
		justify-content: center;
	}
	.bus-index-bg{
		height: 190px;
		overflow: hidden;
	}
	.bus-index-search{
		background-color: #fff;
		margin: -40px 15px 15px;
		padding: 15px 15px 0 15px;
		border-radius: 5px;
		box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05);
		position: relative;
	}
	
	.tab-bar {
	    background-color: #fff;
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-around;
	    height: 57px;
	    box-shadow: 0 -3px 2px 0 rgba(0, 0, 0, .05);
		height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		z-index: 88;
	}
	.tab-bar .tab-item {
	    margin-top: 6px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    color: #333;
	    font-size: 12px;
		
	}
	.is-advisor-ab{
		// background-color: #fff;
		background-color: hsla(0, 0%, 100%, 0.7);
		backdrop-filter: blur(15px);
		border-radius: 6px 6px 0 0;
		height: calc(100% - 4px);
		
	}
	.hd{
		border-radius: 8px 8px 0 0;
		height: 60px;
		position: relative;
		margin: -20px 15px 0 15px;
		z-index: 3;
		display: flex;
		flex-direction: row;
		justify-content: center;
		
	}

	.is-advisor-ab .item{
		justify-content: center;
		align-items: center;
		width: 50%;
		padding: 12px 0;
		color: #000;
	}
	.is-advisor-ab .item.on {
	   color: var(--view-theme);
		// top: -4px;
		// background: #FFF;
		// padding-top: 20px;
		// position: relative;
	}
	
	// .is-advisor-ab .item.on .title:not(.overseas-title):before {
	//     background: #006ff6;
	//     content: "" !important;
	//     display: block;
	//     position: absolute;
	//     width: 40px;
	//     height: 2px;
	//     border-radius: 2px;
	//     right: 15%;
	//     transform: translateX(-50%);
	//     bottom: 4px;
	// }
	.is-advisor-ab .item.on .line{
		opacity: 1;
		height: 2px;
		margin-top: 7px;
		margin-bottom: 5px;
		width: 40px;
		background-color: var(--view-theme);
		border-radius: 3px;
		position: absolute;
		top: 44px;
	}
	.is-advisor-ab .item.on .tab-bg1{
		 background: transparent;
		background-image: url('');
		position: absolute;
		width: 50%;
		height: 70px;
		z-index: -1;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 102% 100%;

	}
	.is-advisor-ab .item.on .tab-bg2{
		 background: transparent;
		background-image: url('');
		position: absolute;
		width: 50%;
		height: 70px;
		z-index: -1;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 102% 100%;
	
	}
	.is-advisor-ab .title{
		font-size: 14px;
		line-height: 19px;
		font-weight: 600;
		margin-bottom: 2px;
		
	}
	.is-advisor-ab .subtitle{
		line-height: 11px;
		font-size: 10px;
	}
	.dz-block{
		width: 60px;
	}
	
	.dz-img{
		width: 35px;
		height: 35px;
		border: 1px solid var(--view-theme);
		border-radius: 50%;
		color: var(--view-theme);
	}
	.dz-dash{
		// widt h: 50px;
		border-bottom: 1px dashed #000;
		// width: 100%;
		width: 50px;
		/* margin: 0 10px; */
		// margin-left: 10px;
		// margin-right: 10px;
		margin-bottom: 20px;
	}
</style>
